<template>
    <div>
        <Echart width="150px" height="150px" :config="config" refName="bing"></Echart>
    </div>
</template>
<script>
import Echart from "@/common/index.vue"
import { config } from "@/components/leftTop/index.js"
export default {
    props: {
        chartColor: {
            type: [Array, String],
            defaule: () => {
                return "blue"
            }
        },
        textColor: {
            type: String,
            defaule: "#000000"
        },
        title: {
            type: String,
            default: "---"
        },
        value: {
            type: [Number, String],
            defaule: 0
        }
    },
    components: {
        Echart
    },
    data() {
        return {
            config: null
        }
    },
    methods: {
        handlerEchartColor(option) {
            option.series[0].data[0].itemStyle.color = Array.isArray(this.chartColor) ? new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                    offset: 0,
                    color: this.chartColor[0],
                },
                {
                    offset: 1,
                    color: this.chartColor[1],
                },
            ]) : this.chartColor
        },
        handlerTitle(option) {
            option.series[0].data[0].name = this.value + "\n"+ "\n" + this.title
            option.series[0].data[0].value = this.value
        }
    },
    created() {
    },
    mounted() {
        let option = config.call(this)
        option.series[0].label.color = this.textColor
        this.handlerEchartColor(option)
        this.handlerTitle(option)
        this.config = option
    },
}
</script>
<style lang="less" scoped>

</style>
